<template>
	<!-- 首页 -->
	<view class="content">
		<!-- 头部 -->
		<view class="content_top">
			<view class="content_top_left">
				<image mode="widthFix" class="content_top_leftimg" src="http://localhost:3000/img/logins.png"></image>
			</view>
			<view class="content_top_content" @click="search">
				<icon class="content_top_contenticon" type="search" size="28rpx"></icon>
				<text class="content_top_contenttext">部分商品 第2件0元</text>
			</view>
			<view class="content_top_content_right">
				<image mode="widthFix" class="content_top_content_rightimg" src="http://localhost:3000/img/news.png"></image>
				<text class="content_top_content_righttext">消息</text>
			</view>
		</view>
		<!-- 轮播图 -->
		<swiper style="width: 750rpx;height: 360rpx" circular autoplay indicator-dots indicator-active-color="#fff" indicator-color="#ccc">
			<swiper-item>
				<image style="width:100%" mode="widthFix" src="http://localhost:3000/images/tab1.png"></image>
			</swiper-item>
			<swiper-item>
				<image style="width:100%" mode="widthFix" src="http://localhost:3000/images/tab1.png"></image>
			</swiper-item>
			<swiper-item>
				<image style="width:100%" mode="widthFix" src="http://localhost:3000/images/tab1.png"></image>
			</swiper-item>
		</swiper>
		<!-- 分类导航 -->
		<view class="classifys">
			<view class="classifys_dan" @click="classify(1)">
				<image mode="widthFix" class="classifys_dan_img" src="http://localhost:3000/images/list1.png"></image>
				<text class="classifys_dan_text">大家电</text>
			</view>
			<view class="classifys_dan" @click="classify(52)">
				<image mode="widthFix" class="classifys_dan_img" src="http://localhost:3000/images/list2.png"></image>
				<text class="classifys_dan_text">热门推荐</text>
			</view>
			<view class="classifys_dan" @click="classify(70)">
				<image mode="widthFix" class="classifys_dan_img" src="http://localhost:3000/images/list3.png"></image>
				<text class="classifys_dan_text">海外购</text>
			</view>
			<view class="classifys_dan" @click="classify(172)">
				<image mode="widthFix" class="classifys_dan_img" src="http://localhost:3000/images/list4.png"></image>
				<text class="classifys_dan_text">苏宁房产</text>
			</view>
			<view class="classifys_dan" @click="classify(174)">
				<image mode="widthFix" class="classifys_dan_img" src="http://localhost:3000/images/list5.png"></image>
				<text class="classifys_dan_text">手机相机</text>
			</view>
		</view>
		<!-- 立即抢购 -->
		<view class="classifys_qianggou">
			<image  @click="newproducts('新品上架')" class="classifys_qianggou_img" mode="widthFix" src="http://localhost:3000/images/lf.png"></image>
			<image  @click="newproducts('常买商品')" class="classifys_qianggou_img" mode="widthFix" src="http://localhost:3000/images/ri1.png"></image>
		</view>
		<!-- 更多好货 -->
		<view class="classifys_gengduo">
			<image  @click="newproducts('平台精选')" class="classifys_qianggou_img" mode="widthFix" src="http://localhost:3000/images/list31.png"></image>
			<image  @click="newproducts('为您推荐')" class="classifys_qianggou_img classifys_gengduo_mar" mode="widthFix" src="http://localhost:3000/images/list32.png"></image>
			<image  @click="newproducts('特价商品')" class="classifys_qianggou_img" mode="widthFix" src="http://localhost:3000/images/list33.png"></image>
		</view>
		<!-- 温馨提示 -->
		<view class="messages">
			<image class="messages_img" mode="widthFix" src="http://localhost:3000/img/xing1.png"></image>
			<text class="messages_title">温馨提示 谨防上当受骗 造成财产损失</text>
		</view>
		<!-- 为您推荐 -->
		<view class="tuijians">
			<index-list>
				<!-- 标题 -->
				<view class="tuijian">
					<text class="tuijian_1"></text>
					<text class="tuijian_2"></text>
					<text class="tuijian_3"></text>
					<text class="tjtitle">为您推荐</text>
					<text class="tuijian_3"></text>
					<text class="tuijian_2"></text>
					<text class="tuijian_1"></text>
				</view>			
				<!-- 商品列表 -->
			</index-list>
		</view>

		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {
			// 点击进入搜索界面
			search(){
				uni.navigateTo({
					url:"../search/search"
				})
			},
			// 点击分类导航,进入分类界面
			classify(id){
				// 将点击商品类型的id存储到本地缓存中
				uni.setStorage({
					key:"type_id",
					data:id,
					success: (res) => {
						// 存储成功之后进行页面跳转
						uni.switchTab({
							url:"../classify/classify"
						})
					}
				})

			},
			// 点击立即抢购,进入抢购页面
			newproducts(title){
				uni.navigateTo({
					url:"./nowproducts?title="+title
				})
			}
		}
	}
</script>

<style>
	.content{
		width: 750rpx;
		background-color: #f3f3f3;
	}
	.content_top{
		width: 100%;
		height: 68rpx;
		display: flex;
		justify-content: space-between;
		background-color:#5d0000 ;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999;
	}
	.content_top_left{
		width: 84rpx;
		margin: 0 20rpx;
	}
	.content_top_leftimg{
		width: 100%;
		vertical-align: middle;
	}
	.content_top_content{
		flex:1;
		display: flex;
		height: 100%;
		align-items: center;
		font-size: 24rpx;
		color: #888888;
		background-color: #fff;
		border-radius: 10rpx;
	},
	.content_top_contenticon{
		margin: 0 14rpx;
	}
	.content_top_content_right{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 70rpx;
		font-size: 26rpx;
		color: #cdb8b7;
		margin: 0 10rpx;
	}
	.content_top_content_rightimg{
		width:32rpx;
		vertical-align: middle;
	}
	.classifys{
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.classifys_dan{
		margin: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		
	}
	.classifys_dan_img{
		width: 108rpx;
		vertical-align: middle;
		margin-bottom: 10rpx;
	}
	.classifys_dan_text{
		font-size:26rpx ;
		color: #444444;
	}
	.classifys_qianggou{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 20rpx;
		
	}
	.classifys_qianggou_img{
		flex:1;
		vertical-align: middle;
	}
	.classifys_gengduo{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin:20rpx;
	}
	.classifys_gengduo_mar{
		margin: 0 12rpx;
	}
	.messages{
		height: 42rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		padding: 20rpx;
		margin: 20rpx;
		border-radius: 10rpx;
	}
	.messages_img{
		width: 84rpx;
		margin-right: 10rpx;
	}
	.messages_title{
		font-size: 24rpx;
		color: #000000;
		border-left: 2rpx solid #eee;
		padding-left: 10rpx;
	}
	.tuijian{
		font-size: 26rpx;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}
	text[class^="tuijian"]{
		background: red;
		border-radius: 50%;
		margin: 0 10rpx;
	}
	.tjtitle{
		background-color:#f7f7f7 ;
	}
	.tuijian_1{
		padding: 4rpx;
	}
	.tuijian_2{
		padding: 6rpx;
	}
	.tuijian_3{
		padding: 8rpx;
	}

	image{
		vertical-align: middle;
	}
		
	
</style>
